<template>
	<view class="main_bg">
		<view v-if="cardsList.length>0" class="item_ul">
			<view v-for="(item,index) in cardsList" :key="index" class="item_li" @click="goPages(item.id)">
				<image class="bao_card" v-if="item.status==2" src="/static/buring.svg"></image>
				<image class="bao_card" v-else src="/static/pass.svg"></image>
				<view class="conten" :style="{color:item.status==2? '#fff':'#000'}">
					<view class="c_num">
						<p>{{item.code}}</p>
						<p class="plb">{{item.status==2?'在保':'已过保'}}</p>
					</view>
					<view class="c_m">
						保修期至 &nbsp;{{setTime(item.warrantyEndTime)}}
					</view>
					<view class="x_goods">
						商品信息: &nbsp;{{item.goodsBrand}}&nbsp;{{item.goodsName}}
					</view>
				</view>
			</view>
		</view>
		<view v-else class="void_goods">
			<image class="img" src="/static/goods.svg"></image>
			<view class="tip">暂无电子保卡</view>
		</view>
		<view class="btn_logout">
			<button type="primary" size="small" @click="addOpen" class="onlogout">
				<span>添加电子保卡</span>
			</button>
		</view>
		<!-- 添加电子保卡 弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="add_main">
				<p>添加电子保卡</p>
				<uni-easyinput suffixIcon="scan" v-model="code" placeholder="请输入或扫描机身编码"
					@iconClick="iconClick"></uni-easyinput>
				<button class="onlogout" @click="addCode"><span>添加</span></button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {
		ref, onMounted
	} from "vue";
	import { onReachBottom,onUnload } from '@dcloudio/uni-app'
	import apiCode from '@/util/api/code.js'
	const total = ref(0)
	const cardsList = ref([])
	const page = ref(1)
	onMounted(() => {
		getList()
	})
	const popup = ref()
	const code = ref('')
	const addOpen = () => {
		//打开弹窗
		popup.value.open()
	}
	onUnload(() => {
		uni.hideLoading()
	})
	//日期转换 xxxx-xx-xx==>xxxx年xx月xx日
	const setTime = (str : string) => {
		// 将时间字符串转换成Date对象
		let date = new Date(str.replace(/-/g, '/'));
		// 获取年月日
		let year = date.getFullYear();
		let month : string | number = date.getMonth() + 1;
		let day : string | number = date.getDate();
		// 将月份和日期补齐两位数
		month = month < 10 ? '0' + month : month;
		day = day < 10 ? '0' + day : day;
		// 拼接成年月日格式的字符串
		let result = year + '年' + month + '月' + day + '日';
		return result
	}
	// 调起客户端扫码界面，扫码成功后返回对应的结果。
	const iconClick = () => {
		uni.scanCode({
			scanType: ['qrCode', 'barCode'],//扫码类型
			success: async function (res) {
				code.value = res.result
				await addCode()
			},
			fail: (err) => {
			}
		})
	}
	// 添加编码
	const addCode = async () => {
		if (code.value) {
			uni.showLoading({
				title: "加载中...",
				mask: true
			})
			await apiCode.getRegisterSecurityCheck({ code: code.value }).then(res => {
				if (res.code == 20000) {
					// 判断是否登记激活
					if (!res.data.row.register) {
						popup.value.close()
						uni.navigateTo({
							url: '/pages_user/card/acitvation?id=' + res.data.row.id
						})
					} else {
						uni.showToast({
							title: '该商品已登记激活！',
							icon: 'none'
						})
					}
				}
			})
			uni.hideLoading()
		} else {
			uni.showToast({
				title: '请先输入编码',
				icon: 'none'
			})
		}
	}
	// 获取商品列表
	const getList = async () => {
		let data = {
			"limit": 0,
			"page": page.value
		}
		uni.showLoading({
			mask: true,
			title: '加载中...'
		})
		await apiCode.getUserCodeList(data).then((res : { code : number; data : any; }) => {
			if (res.code === 20000) {
				total.value = res.data.total
				cardsList.value = [...cardsList.value, ...res.data.rows]
			}
		})
		uni.hideLoading()
	}
	// 详细信息
	const goPages = (id : string) => {
		uni.navigateTo({
			url: '/pages_user/card/detail?id=' + id
		})
	}
	// 触底加载更多
	onReachBottom(() => {
		if (total.value > cardsList.value.length) {
			page.value = page.value + 1
			getList()
		}
	})
</script>
<style lang="scss" scoped>
	.main_bg {
		position: relative;
		padding-bottom: 180rpx;
		height: 100vh;
		overflow-y: auto;
		width: 100%;
		z-index: 2;

		.void_goods {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 100%;
			height: 60vh;

			.img {
				width: 60%;
				height: 250rpx;
			}

			.tip {
				color: #aaa;
				font-size: 28rpx;
			}
		}

		.item_ul {
			.item_li {
				margin: 24rpx;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 300rpx;
				z-index: 1;

				&:last-child {
					margin-bottom: 400rpx;
				}

				.bao_card {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					z-index: -1;
					position: absolute;
					top: 0;
					right: 0;
				}

				.conten {
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					align-content: space-between;
					flex-direction: column;
					height: 228rpx;
					width: 460rpx;

					.c_num {
						display: flex;
						justify-content: space-between;
						font-weight: bold;

						.plb {
							margin-right: 30rpx;
						}
					}

					.x_goods {
						font-size: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 100%;
					}

					.c_m {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						font-weight: bold;
					}
				}
			}
		}

		.btn_logout {
			position: fixed;
			bottom: 60rpx;
			margin: 0 auto;
			width: 100%;
			z-index: 3;

			:deep(button:after) {
				border: none !important;
			}

			.onlogout {
				font-size: 28rpx;
				padding: 0rpx 200rpx;
				margin: 0 60rpx;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #007cff;
			}
		}

		.add_main {
			background-color: #fff;
			border-radius: 20rpx;
			width: 80vw;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 24rpx;

			.onlogout {
				font-size: 28rpx;
				margin: 30rpx 20rpx 0;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				width: 100%;
				color: #fff;
				background-color: #007cff;
			}

			:deep(.is-input-border) {
				// border-radius: 50rpx !important;
				background-color: rgba(243, 244, 248, 1) !important;
				padding: 10rpx;
				margin-top: 20rpx;
				border: none;
				height: 80rpx !important;
				line-height: 80rpx;
				font-size: 28rpx
			}
		}
	}
</style>